<!--
Author: 桓桓
DateTime: 2019.08.01
Desc: 产品详情页
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情</title>
    <link rel="stylesheet" href="./static/css/global.css">
    <link rel="stylesheet" href="./static/css/index.css">
    <script src="./static/js/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="./static/js/css/layui.css" media="all">
    <script src="./static/js/global/jquery-3.2.1.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="./static/css/style.min.css">
    <link rel="stylesheet" href="./static/css/productDetails.css">
    <link rel="stylesheet" href="./static/css/commodityDetails.css">
</head>

<body>
    <!-- header -->
    <div class="global-title">
        <div>
            <!-- <span class="title-left">嗨，欢迎来贝链嗨购</span> -->
            <div class="title-left-login">
                <span>嗨，欢迎来贝链嗨购</span>
                <div class="title-left-login-user">
                    <img src="./static/img/img1.png" alt="">
                    <span>这里是用户昵称</span>
                </div>
                <a href="./mine.html">个人中心</a>
                <a href="">收藏夹</a>
                <a href="">退出账户</a>
            </div>
            <div class="title-right">
                <a href="/shopLogin.html">供应商登录</a>
                <a href="./help.html">帮助中心</a>
            </div>
        </div>
    </div>
    <div class="search-header">
        <div>
            <a class="search-header-left" href="">
                <img src="./static/img/header_logo.png" alt="">
            </a>
            <div class="mt-50 mr-10">
                <p class="f-18 f-666 inline-block">威海掌上鲜食品有限公司</p>
                <p class="inline-block ml-10 mr-5">
                    <img src="./static/img/38.png" alt="" class="ver-sub">
                </p>
                <p class="inline-block">
                    <img src="./static/img/39.png" alt="" class="ver-sub">
                </p>
            </div>
            <div class="search-header-right">
                <div class="search-header-right-search">
                    <div>
                        <input type="text" placeholder="搜索商品名称/名称/分类">
                        <div>搜索</div>
                    </div>
                </div>
                <a class="search-header-car" href="">
                    搜本店
                </a>
            </div>
        </div>
    </div>
    <div class="n-banner">
        <img src="" alt="" class="wd100">
    </div>
    <div class="wd100 dao">
        <div class="n-nav wd1200">
            <ul class="inline-block left">
                <li class="nav_li">首页</li>
                <li class="nav_li">所有商品</li>
                <li class="nav_li">鱼类</li>
                <li class="nav_li">虾类</li>
                <li class="nav_li">贝类</li>
                <li class="nav_li">关于我们</li>
            </ul>
            <div class="store_search left inline-block">
                <div class="store_search_left left">
                    <input type="text" placeholder="搜索商品名称/名称/分类">
                </div>
                <div class="store_search_right left">
                    <span class="f-16 f-fff">店内搜索</span>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <script>
        $(function () {
            $(".n-nav .nav_li").eq(0).addClass("curr");
            $(".n-nav .nav_li").click(function () {
                $(this).siblings().removeClass("curr");
                $(this).addClass("curr");
            });
        });
    </script>
    <!-- header -->

    <!-- 详情 -->
    <div class="details">
        <!-- 详情左边 -->
        <div class="left" id="ada">
            <!-- 商品图 -->
            <div class="imgbox" id="small">
                <div id="shade"></div>
                <img src="./static/img/commodity1.png" alt="">
                <img src="./static/img/commodity2.png" alt="" style="display: none">
                <img src="./static/img/commodity3.png" alt="" style="display: none">
                <img src="./static/img/commodity4.png" alt="" style="display: none">
                <img src="./static/img/commodity1.png" alt="" style="display: none">
            </div>
            <!-- 放大镜显示 -->
            <div class="showbox">
                <div id="big" style="background-image: url(./static/img/commodity1.png);background-size: cover"></div>
                <div style="background-image: url(./static/img/commodity2.png);display: none;background-size: cover">
                </div>
                <div style="background-image: url(./static/img/commodity3.png);display: none;background-size: cover">
                </div>
                <div style="background-image: url(./static/img/commodity4.png);display: none;background-size: cover">
                </div>
                <div style="background-image: url(./static/img/commodity1.png);display: none;background-size: cover">
                </div>
            </div>
            <!-- 下面无关的按钮 -->
            <div class="img">
                <img src="./static/img/commodity1.png" alt="" class="look">
                <img src="./static/img/commodity2.png" alt="">
                <img src="./static/img/commodity3.png" alt="">
                <img src="./static/img/commodity4.png" alt="">
                <img src="./static/img/commodity1.png" alt="">
            </div>
            <div class="text">
                <div>
                    <img src="./static/img/xinxing-2.png" alt="">
                    <p>收藏商品</p>
                    <span>收藏人气1000</span>
                </div>
                <div>
                    <img src="./static/img/complaint.png" alt="">
                    <p>投诉</p>
                </div>
            </div>
        </div>
        <!-- 详情右边 -->
        <div class="right">
            <div class="title">
                <div>
                    <div class=".goods-back1">预售</div>
                    <p>我爱鱼 冷冻冰道多春鱼</p>
                </div>
                <p>智利直接进口，20天后到港，只有200件。</p>
                <span>威海远洋渔场</span>
            </div>
            <div class="price">
                <div>
                    <p>价格</p>
                    <span>¥88.00/斤</span>
                    <div>夏上新</div>
                    <section>到港日：2019-05-30</section>
                </div>
                <div>
                    <p>优惠</p>
                    <div>
                        <div class="discounts">满1000元 减 300元</div>
                        <div>满100件件300元</div>
                    </div>
                    <div class="discounts_message">需付定金30%</div>
                </div>
            </div>
            <div class="remark">
                <div>
                    <p>备注说明</p>
                    <span>智利直接进口，20天后到港，只有200件，文字样式，文字样式智利直接进 口，20天后到港，只有200件，文字样式智利直接进口，20天后到港，只有 200件，文字样式</span>
                </div>
                <div>
                    <p>规格</p>
                    <div>
                        <button class="number">60kg/箱</button>
                        <button>60kg/箱</button>
                        <button>100kg/箱</button>
                        <div>请选择规格</div>
                    </div>
                </div>
                <div>
                    <p>数量</p>
                    <div>
                        <section>
                            <input type="button" value="+" onclick="add(this)" />
                            <input type="text" class="text_box" value="1" />
                            <input type="button" value="-" onclick="del(this)" />
                        </section>
                        <p>件</p>
                        <span>（库存188件）</span>
                        <div>请选择规格</div>
                    </div>
                </div>
            </div>
            <div class="btn">
                <button class="">立即购买</button>
                <button class="gwc">加入购物车</button>
                <div class="gwc-c none">
                    <img src="./static/img/cg.png" alt="">
                    <p class="f-16 f-666">成功加入购物车</p>
                    <div class="">
                        <div class="inline-block" id="gwc-q">
                            <span class="f-fff f-14">确定</span>
                        </div>
                        <div class="inline-block">
                            <span class="f-16">查看购物车</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="property">
                <div>
                    <p>供应链<br>直采</p>
                </div>
                <div>
                    <p>海外<br>全品类</p>
                </div>
                <div>
                    <p>区块链<br>溯源</p>
                </div>
                <div>
                    <p>全过程<br>冷链</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 评论 -->
    <div class="comment">
        <div class="left">
            <div class="store">
                <div class="title">我爱鱼生鲜旗航店</div>
                <div class="body">
                    <div>
                        <p>联系客服:</p>
                        <a href="">
                            <img src="./static/img/bill_qq.png" alt="">
                        </a>
                        <a href="">
                            <img src="./static/img/bill_service.png" alt="">
                        </a>
                    </div>
                    <button><img src="./static/img/store.png" alt="">进入店铺</button>
                </div>
            </div>
            <div class="classify">
                <div class="title">分类</div>
                <div class="body">
                    <p>鱼类（日本鲜活进口）</p>
                    <p>虾类（阿拉斯加鲜活进口）</p>
                    <p>贝类（北极鲜活进口）</p>
                </div>
            </div>
            <div class="more">
                <div class="title">推荐商品</div>
                <div class="body">
                    <div>
                        <img src="./static/img/commodity1.png" alt="">
                        <p>鲜活进口阿拉斯加帝王蟹</p>
                        <span>¥68.00</span>
                    </div>
                    <div>
                        <img src="./static/img/commodity2.png" alt="">
                        <p>鲜活进口阿拉斯加帝王蟹</p>
                        <span>¥68.00</span>
                    </div>
                    <div>
                        <img src="./static/img/commodity3.png" alt="">
                        <p>鲜活进口阿拉斯加帝王蟹</p>
                        <span>¥68.00</span>
                    </div>
                    <div>
                        <img src="./static/img/commodity4.png" alt="">
                        <p>鲜活进口阿拉斯加帝王蟹</p>
                        <span>¥68.00</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="title">
                <div class="title1">商品详情</div>
                <div class="title2 action">商品参数</div>
                <div class="title3 action">评价</div>
            </div>
            <div class="body1">
                <div>
                    <dl>
                        <dt>商品编码：</dt>
                        <dd>398482342</dd>
                        <dt>品牌：</dt>
                        <dd>威海海洋</dd>
                        <dt>国家：</dt>
                        <dd>智利</dd>
                    </dl>
                    <dl>
                        <dt>渔场：</dt>
                        <dd>威尔士</dd>
                        <dt>产品规格：</dt>
                        <dd>5.0</dd>
                        <dt>包装规格：</dt>
                        <dd>100kg/箱</dd>
                    </dl>
                    <dl>
                        <dt>重量：</dt>
                        <dd>100kg</dd>
                    </dl>
                </div>
                <div></div>
                <img src="./static/img/detail_bg.png" alt="">
            </div>
            <div class="body2" style="display: none">
                暂无数据
            </div>
            <div class="body3" style="display: none">
                <div>
                    <div class="top">
                        <div>
                            <img src="./static/img/help_img4.png" alt="">
                        </div>
                        <div>
                            <div>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid"></i>
                            </div>
                            <p>货源优质，新鲜，会持续选购。</p>
                            <span>2019-05-09</span>
                        </div>
                    </div>
                    <div class="center">
                        <img src="./static/img/commodity1.png" alt="">
                        <img src="./static/img/commodity2.png" alt="">
                        <img src="./static/img/commodity3.png" alt="">
                        <img src="./static/img/commodity4.png" alt="">
                    </div>
                    <div class="bottom">
                        <div>
                            <p>【商家回复】 </p>
                            <span>2019-05-09</span>
                        </div>
                        <div>
                            <p>感谢您的认可，望长期合作。</p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="top">
                        <div>
                            <img src="./static/img/help_img3.png" alt="">
                        </div>
                        <div>
                            <div>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid"></i>
                            </div>
                            <p>货源优质，新鲜，会持续选购。</p>
                            <span>2019-05-09</span>
                        </div>
                    </div>
                    <div class="center">
                        <img src="./static/img/commodity4.png" alt="">
                        <img src="./static/img/commodity1.png" alt="">
                        <img src="./static/img/commodity2.png" alt="">
                        <img src="./static/img/commodity3.png" alt="">
                    </div>
                    <div class="bottom">
                        <div>
                            <p>【商家回复】 </p>
                            <span>2019-05-09</span>
                        </div>
                        <div>
                            <p>感谢您的认可，望长期合作。</p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="top">
                        <div>
                            <img src="./static/img/help_img2.png" alt="">
                        </div>
                        <div>
                            <div>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                            </div>
                            <p>货源优质，新鲜，会持续选购。</p>
                            <span>2019-05-09</span>
                        </div>
                    </div>
                    <div class="center">
                        <img src="./static/img/commodity3.png" alt="">
                        <img src="./static/img/commodity4.png" alt="">
                        <img src="./static/img/commodity2.png" alt="">
                    </div>
                    <div class="bottom">
                        <div>
                            <p>【商家回复】 </p>
                            <span>2019-05-09</span>
                        </div>
                        <div>
                            <p>感谢您的认可，望长期合作。</p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="top">
                        <div>
                            <img src="./static/img/help_img1.png" alt="">
                        </div>
                        <div>
                            <div>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                            </div>
                            <p>货源优质，新鲜，会持续选购。</p>
                            <span>2019-05-09</span>
                        </div>
                    </div>
                    <div class="bottom">
                        <div>
                            <p>【商家回复】 </p>
                            <span>2019-05-09</span>
                        </div>
                        <div>
                            <p>感谢您的认可，望长期合作。</p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="top">
                        <div>
                            <img src="./static/img/help_img4.png" alt="">
                        </div>
                        <div>
                            <div>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                                <i class="layui-icon layui-icon-rate-solid star"></i>
                            </div>
                            <p>货源优质，新鲜，会持续选购。</p>
                            <span>2019-05-09</span>
                        </div>
                    </div>
                    <div class="bottom">
                        <div>
                            <p>【商家回复】 </p>
                            <span>2019-05-09</span>
                        </div>
                        <div>
                            <p>感谢您的认可，望长期合作。</p>
                        </div>
                    </div>
                </div>
                <section id="paging" style="display:flex;justify-content: center;margin-top: 100px;"></section>
            </div>
        </div>
    </div>
    <!-- 推荐 -->
    <div class="recommend">
        <div class="title">
            <div class="left">
                <img src="./static/img/shopping_car_p2.png" alt="">
                相关推荐
            </div>
            <div class="right">
                更多 >
            </div>
        </div>
        <div class="body">
            <div>
                <img src="./static/img/commodity1.png" alt="">
                <div>
                    <p>冷淡南极银鳕鱼</p>
                    <span>青岛远洋渔业</span>
                    <div>¥49.90</div>
                    <section>
                        现货
                    </section>
                </div>
            </div>
            <div>
                <img src="./static/img/commodity2.png" alt="">
                <div>
                    <p>冷淡南极银鳕鱼</p>
                    <span>青岛远洋渔业</span>
                    <div>¥49.90</div>
                    <section>
                        现货
                    </section>
                </div>
            </div>
            <div>
                <img src="./static/img/commodity3.png" alt="">
                <div>
                    <p>冷淡南极银鳕鱼</p>
                    <span>青岛远洋渔业</span>
                    <div>¥49.90</div>
                    <section>
                        现货
                    </section>
                </div>
            </div>
            <div>
                <img src="./static/img/commodity4.png" alt="">
                <div>
                    <p>冷淡南极银鳕鱼</p>
                    <span>青岛远洋渔业</span>
                    <div>¥49.90</div>
                    <section>
                        现货
                    </section>
                </div>
            </div>
        </div>
    </div>

    <!-- footer -->
    <div class="global-footer">
        <div class="global-footer-header">
            <div>
                <img class="footer1" src="./static/img/footer1.png" alt="">
                <div>
                    <p>供应链直采</p>
                    <p>限定产源 质量保证</p>
                </div>
            </div>
            <div>
                <img class="footer2" src="./static/img/footer2.png" alt="">
                <div>
                    <p>海外全品类</p>
                    <p>实时物流 安全可控</p>
                </div>
            </div>
            <div>
                <img class="footer3" src="./static/img/footer3.png" alt="">
                <div>
                    <p>区块链溯源</p>
                    <p>实时物流 安全可控</p>
                </div>
            </div>
            <div>
                <img class="footer4" src="./static/img/footer4.png" alt="">
                <div>
                    <p>全过程冷链</p>
                    <p>实时物流 安全可控</p>
                </div>
            </div>
        </div>
        <div style="width: 100%;height: 1px;background-color: #ffffff;opacity: 0.38;"></div>
        <div class="global-footer-cont">
            <div>
                <a href="./index.html" class="global-footer-cont-logo">
                    <img src="./static/img/footer_logo.png" alt="">
                </a>
                <a href="" class="global-footer-cont-menu">关于我们</a>
                <a href="" class="global-footer-cont-menu">产品中心</a>
                <a href="" class="global-footer-cont-menu">服务介绍</a>
                <a href="./help.html" class="global-footer-cont-menu">购物指南</a>
                <a href="./help.html" class="global-footer-cont-menu">帮助中心</a>
            </div>
            <div>
                <img src="./static/img/footer_code.png" alt="">
                <p>扫描关注</p>
                <p>贝链嗨购官方微信</p>
            </div>
        </div>
        <div class="global-footer-explain">鲁ICP备 18098987号 copyright @2018 beilianhaigou.com.ALL Rights Reserved.</div>
    </div>
    <!-- footer -->
    <div class="global-service">
        <div>
            <a href="">
                <img src="./static/img/service_car.png" alt="">
            </a>
            <a href="">
                <img src="./static/img/service_service.png" alt="">
            </a>
            <a href="">
                <img src="./static/img/service_time.png" alt="">
            </a>
        </div>
        <div class="global-top" style="display:none">
            <img src="./static/img/top.png" alt="">
        </div>
    </div>
    <script>
        //检测屏幕高度
        var height = $(window).height();
        //scroll() 方法为滚动事件
        $(window).scroll(function () {
            if ($(window).scrollTop() > height) {
                $(".global-top").fadeIn(500);
            } else {
                $(".global-top").fadeOut(500);
            }
        });
        $(".global-top ").click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 100);
            return false;
        });
    </script>
    <script>
        var swiper = new Swiper('.swiper-banner', {
            loop: true,
            speed: 300,
            autoplay: {
                delay: 3000
            },
        });
        var swiper = new Swiper('.swiper-recommend', {
            loop: true,
            slidesPerView: 5,
            spaceBetween: 30,
            pagination: {
                clickable: true,
            },
            navigation: {
                nextEl: '.recommend-goods-next',
                prevEl: '.recommend-goods-prev',
            },
        });
    </script>
</body>
<script>
    layui.use('layer', function () { //独立版的layer无需执行这一句
        var layer = layui.layer; //独立版的layer无需执行这一句
        $('#service').click(function () {
            layer.open({
                type: 2,
                title: '在线客服',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['893px', '600px'],
                content: '//fly.layui.com/'
            });
        });
    });
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage,
            layer = layui.layer;
        //完整功能
        laypage.render({
            elem: 'paging',
            count: 100,
            theme: '#144B9F',
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
            jump: function (obj) {
                console.log(obj)
            }
        });
    });
</script>

<script>
    // 选项卡
    $(function () {
        $(".comment>.right>.title>div").click(function () {
            $(".comment>.right>.title>div").eq($(this).index()).removeClass("action").siblings().addClass("action");
            $(".comment>.right>div[class^='body']").hide().eq($(this).index()).show();
        });
        $(".img>img").click(function () {
            $(".img>img").eq($(this).index()).addClass("look").siblings().removeClass("look");
            $(".imgbox>img").hide().eq($(this).index()).show();
            $(".showbox>div").eq($(this).index()).attr("id", "big").siblings().removeAttr("id");;
        });
        $(".remark>div>div>button").click(function () {
            $(this).addClass("number").siblings().removeClass("number");
        })
    });
</script>
<script>
    //商品数量控制
    function add(q) {//商品点击增加
        var good_num = $(q).parent().find('input[class*=text_box]');
        var old_num = $(good_num).val();
        var new_num = parseInt(old_num) + 1;
        $(good_num).val(new_num);
        var one_price = $(q).parent().parent().find(".product-price span").text();
        var new_money = parseInt(one_price) * parseInt((good_num).val());
        var total_price = $(q).parent().parent().find(".font-total-price span");
        $(total_price).text(new_money);
        var a = $(".font-total-price span");
        var m = 0;
        for (var i = 0; i < a.length; i++) {
            m += Number(a[i].textContent);
        }
        $("#all_price").text("￥" + m);
        $("#all_total_price").text("￥" + m);
    }
    function del(q) {//商品点击减少
        var good_num = $(q).parent().find('input[class*=text_box]');
        var old_num = $(good_num).val();
        var new_num = parseInt(old_num) - 1;
        $(good_num).val(new_num);
        if (new_num < 1) {
            $(good_num).val(1);
        }
        var one_price = $(q).parent().parent().find(".product-price span").text();
        var new_money = parseInt(one_price) * parseInt((good_num).val());
        var total_price = $(q).parent().parent().find(".font-total-price span");
        $(total_price).text(new_money);
        var a = $(".font-total-price span");
        var m = 0;
        for (var i = 0; i < a.length; i++) {
            m += Number(a[i].textContent);
        }
        $("#all_price").text("￥" + m);
        $("#all_total_price").text("￥" + m);
    }
</script>
<script type="text/javascript">
    $(".imgbox").mouseover(function () {
        $(".showbox").css("display", "block")
    });
    $(".imgbox").mouseleave(function () {
        $(".showbox").css("display", "none");
        $(".showbox>div").css("display", "none");
    });

    $("body").mouseover(function () {
        class MagnifyingGlass {
            constructor(newSmall, newBig, newShade, newAda) {
                this.small = newSmall;
                this.big = newBig;
                this.shade = newShade;
                this.ada = newAda;
            }

            onmouseover() {
                let that = this;
                this.small.onmouseover = function (evt) {
                    let e = evt || event;
                    that.big.style.display = "block";
                    that.shade.style.display = "block";
                }
            }

            onmouseout() {
                let that = this;
                this.small.onmouseout = function (evt) {
                    let e = evt || event;
                    that.big.style.display = "none";
                    that.shade.style.display = "none";
                }
            }

            onmousemove() {
                let that = this;
                this.small.onmousemove = function (evt) {

                    let e = evt || event;

                    let left = e.pageX - this.offsetLeft - that.shade.offsetWidth / 2 - ada.offsetLeft;
                    let top = e.pageY - this.offsetTop - that.shade.offsetHeight / 2 - ada.offsetTop;

                    if (left < 0) {
                        left = 0;
                    }
                    if (top < 0) {
                        top = 0;
                    }
                    let maxLeft = that.small.offsetWidth - that.shade.offsetWidth;

                    if (left > maxLeft) {
                        left = maxLeft;
                    }
                    let maxTop = that.small.offsetHeight - that.shade.offsetHeight;

                    if (top > maxTop) {
                        top = maxTop;
                    }

                    that.shade.style.left = left + "px";
                    that.shade.style.top = top + "px";

                    let x = that.big.offsetWidth * left / that.shade.offsetWidth / 4;
                    let y = that.big.offsetHeight * top / that.shade.offsetHeight / 4;

                    that.big.style.backgroundPositionX = -x + "px";
                    that.big.style.backgroundPositionY = -y + "px";
                }
            }
            eventBind() {
                this.onmouseover();
                this.onmouseout();
                this.onmousemove();
            }
        }
        let oSmall = document.getElementById("small");
        let oBig = document.getElementById("big");
        let oShade = document.getElementById("shade");
        let oMg = new MagnifyingGlass(oSmall, oBig, oShade);
        oMg.eventBind();
    });
</script>
<script>
    //加入购物车
    $(function(){
        $(".gwc").click(function(){
            $(".gwc-c").css("display","block");
        });
        $("#gwc-q").click(function(){
            $(".gwc-c").css("display","none");
        });
    });
</script>

</html>